<template>
    <div style="height: 100%; overflow: auto">
        <a-row >
            <a-col :offset="1" :span="21" style="margin-top: 1%">
                <CourseChoose/>
            </a-col>
        </a-row>
        <a-row>
            <a-col :offset="0" :span="18" style="margin-top: 1%">
                <QuestionList :key="$store.state.exercise.question_list_load_key"/>
            </a-col>
            <a-col :span="1" style="margin-top: 1%; ">
                <a-tree :tree-data="$store.state.exercise.chapterTreeData" show-icon @select="onSelect">
                    <a-icon slot="switcherIcon" type="down" />
                    <a-icon slot="smile" type="carry-out" />
                    <a-icon slot="meh" type="carry-out" />
                    <template slot="custom" slot-scope="{ selected }">
                        <a-icon :type="selected ? 'frown' : 'frown-o'" />
                    </template>
                </a-tree>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import CourseChoose from "@/components/content/newexercise/CourseChoose";
    import QuestionList from "@/components/content/newexercise/QuestionList";

    export default {
        name: "choose",
        components:{
            QuestionList,
            CourseChoose,
        },
        beforeMount() {
            this.$store.dispatch('exercise/getQueType');
        },
        data(){
          return{

          }
        },

        methods: {
            onSelect(selectedKeys, info) {
                this.$store.state.exercise.selected_chapter_id = selectedKeys[0];
                this.$store.state.exercise.selected_chapter_name = info.selectedNodes[0].data.props.title;
                this.$store.state.exercise.question_list_load_key = new Date().getTime();
                // console.log('selected', selectedKeys[0], info.selectedNodes[0].data.props.title);
            },
            onCheck(checkedKeys, info) {
                console.log('onCheck', checkedKeys, info);
            },
        },


    }
</script>

<style scoped>

</style>